<template>
  <div class="com-aside">
    <div v-for="item in datas" :key="item.id" class="aside-menu">
      <div class="aside-menu-title" @click="handleClick(item)">
        {{item.label}}
      </div>
      <submenu v-if="isActive.indexOf(item.id) !== -1" :datas="item.children" :allPath="allPath" :isActive="isActive" @activeChange="activeChange">
        暂无数据
      </submenu>
    </div>
  </div>
</template>

<script>
import submenu from './submenu.vue'
export default {
  components: {
    submenu
  },
  data() {
    return {
      // 存储活跃路径
      isActive: ['0']
    }
  },
  watch: {
    datas: {
      deep: true,
      handler () {
        // datas和inputValue同时监听，保证不会缺少数据导致不能回显
        this.defaultOpen(this.inputValue)
      }
    },
    inputValue: {
      immediate:true,
      handler (val) {
        this.defaultOpen(val)
      }
    },
  },
  computed: {
    allPath () {
      let path = {}
      let getAllPathFunction = (datas, arr=[]) => {
        if (datas && datas.length) {
          for (let i in datas) {
            path[datas[i].id] = [...arr, datas[i].id]
            getAllPathFunction(datas[i].children, [...arr, datas[i].id])
          }
        }
      }
      getAllPathFunction(this.datas)
      return path
    },
    inputValue () {
      return this.$store.state.inputValue
    }
  },
  props: {
    datas: {
      type:Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    handleClick(item) {
      // isActive: 数组，侧边栏路径
      // allPath[itemId]: 查找当前点击对象的路径
      if (this.isActive.toString().indexOf(this.allPath[item.id].toString()) !== -1) {
        // 如果当前对象已经在active状态，pop最后一个路径，即折叠当前对象
        let active = [...this.allPath[item.id]]
        active.pop()
        // 父组件直接操作data
        this.isActive = active
      } else {
        // 不在active状态，将当前对象存入活跃状态
        this.isActive.push(item.id)
      }
    },
    activeChange (active) {
      this.isActive = active
    },
    // 默认展开的方法
    defaultOpen (val) {
      if (val) {
        if ((this.allPath[val] && this.allPath[val].length)) {
          this.isActive = [...this.allPath[val]]
          return
        } else if (JSON.stringify(this.datas).indexOf(val) !== -1) {
          let getActive = (datas) => {
            for (let i in datas) {
              if (datas[i].label === val) {
                this.isActive = [...this.allPath[datas[i].id]]
                return
              } else if (datas[i].children && datas[i].children.length) {
                getActive(datas[i].children)
              }
            }
          }
          getActive(this.datas)
        }
      } else {
        this.isActive = ['0']
      }
    }
  }
}
</script>

<style lang="less">
.com-aside {
  height:100%;
  width: 100%;
  border-right: 1px solid #ccc;
  box-sizing: border-box;
  .aside-menu {
    .aside-menu-title {
      cursor: pointer;
      padding-left: 20px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: 400;
      color: #333;
      &:hover {
        font-weight: 700;
        color: cornflowerblue;
      }
    }
    .aside-submenu {
      .aside-submenu-title {
        cursor: pointer;
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        font-weight: 400;
        color: #333;
        &:hover {
          color: cornflowerblue;
        }
        &.active {
          color: cornflowerblue;
          background: #eee;
        }
        & & {
          padding-left: 40px;
        }
      }
    }
  }
}
.aside-submenu {
  & &>.aside-submenu-title {
    padding-left: 40px!important;
  }
  & & &>.aside-submenu-title {
    padding-left: 50px!important;
  }
  & & &>.aside-submenu-title {
    padding-left: 60px!important;
  }
}
</style>